import React, {useState, useRef,useEffect} from 'react';
import {Card, Descriptions,DatePicker,message} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import numeral from 'numeral';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { connect} from 'umi';
import { getPaySlipList,getSalaryChangeList,getEmployeeSalaryModule,checkAuthToken,saveAndUpdatePwdOrCheck} from '../service';
import moment from 'moment';
import CheckAuth from '../components/CheckAuth';
import { salaryAdjustmentTypeList } from "@/utils/constant";
import {setLocalstorage,getLocalstorage} from '@/utils/localstorage';

const TableList = (props) => {
  const { global = {}} = props;
  const {options = {}} = global;
  const {jobLevel = []} = options;
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [visible, setVisible] = useState(false);
  const [loading,setLoading] = useState(false);
  const [params,setParams] = useState({});
  const [salaryInfo,setSalaryInfo] = useState({});
  const [status,setStatus] = useState(null);
  const { RangePicker } = DatePicker;


  useEffect(() => {
    checkAuthToken(getLocalstorage("authToken")).then(res => {
      if(!res.flag){
        setStatus(res.error);
        setVisible(true);
      }
    });
    initModule();
  }, []);

  const initModule = () => {
    getDateResult([moment().subtract(1 ,'years' ).format("YYYY-MM"),moment().format("YYYY-MM")]);
    getEmployeeSalaryModule().then(res => {
      if(res && res.length > 0 ){
        setSalaryInfo(res[0]);
      }
    })
  };

  const getDateResult = (value) => {
    setParams({
      date:[moment(value[0]).format('YYYY-MM'),moment(value[1]).format('YYYY-MM')]
    });
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveAndUpdatePwdOrCheck(values,status).then((res)=>{
      if(res.flag){
        setLocalstorage("authToken",res.data);
        setVisible(false);
        message.success('操作成功！');
        initModule();
        actionRef.current && actionRef.current.reload();
        actionRef2.current && actionRef2.current.reload();
      }else{
        message.error(res.error);
      }
      setLoading(false)
    })
  };

  const columns = [
    {
      title: '查询月份',
      hideInTable: true,
      dataIndex: 'date',
      renderFormItem: (item, props) => {
        return <RangePicker defaultValue={[moment().subtract(1 ,'years' ), moment()]} picker="month" onChange={getDateResult} className='widthStyle'/>;
      }
    },
    {
      title: '时间',
      fixed: 'left',
      hideInSearch: true,
      width:'120px',
      dataIndex: 'month'
    },
    {
      title: '基本工资',
      hideInSearch: true,
      dataIndex: 'basicWage',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '绩效工资',
      hideInSearch: true,
      dataIndex: 'performancePay',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '竞业津贴',
      hideInSearch: true,
      dataIndex: 'competitionAllowance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '社保津贴',
      hideInSearch: true,
      dataIndex: 'socialSecurityAllowance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '加班工资',
      hideInSearch: true,
      align: 'right',
      dataIndex: 'overtimePay',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '通讯补贴',
      hideInSearch: true,
      dataIndex: 'communicationSubsidy',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '交通补贴',
      hideInSearch: true,
      dataIndex: 'transportationSubsidy',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '职称津贴',
      hideInSearch: true,
      dataIndex: 'titleAllowance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '补充社保津贴',
      hideInSearch: true,
      dataIndex: 'sociaSecurityAllowance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '奖金',
      hideInSearch: true,
      dataIndex: 'bonus',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '预发奖金',
      hideInSearch: true,
      dataIndex: 'advanceBonus',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '其他',
      hideInSearch: true,
      dataIndex: 'others',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '应发工资',
      hideInSearch: true,
      dataIndex: 'salaryPayable',
      align: 'center',
      width:'120px',
      render: (text) => {
        return text!=='-' ? <strong>{numeral(text).format('0.00')}</strong> : '';
      }
    },
    {
      title: '养老保险',
      hideInSearch: true,
      dataIndex: 'endowmentInsurance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '医保',
      hideInSearch: true,
      dataIndex: 'medicalInsurance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '失业保险',
      hideInSearch: true,
      dataIndex: 'unemploymentInsurance',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '公积金',
      hideInSearch: true,
      dataIndex: 'providentFund',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '个人所得税',
      hideInSearch: true,
      dataIndex: 'personalIncomeTax',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '补扣预发奖金',
      hideInSearch: true,
      dataIndex: 'deductionOfAdvanceBonus',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '税后扣款',
      hideInSearch: true,
      dataIndex: 'deductionAfterTax',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '扣款合计',
      hideInSearch: true,
      dataIndex: 'totalDeduction',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '纯粹工资',
      hideInSearch: true,
      dataIndex: 'netWage',
      align: 'right',
      render: (text) => {
        return text!=='-' ? numeral(text).format('0.00') : '';
      }
    },
    {
      title: '实发工资',
      hideInSearch: true,
      dataIndex: 'paidInSalary',
      align: 'center',
      fixed: 'right',
      width:'120px',
      render: (text) => {
        return text!=='-' ? <strong>{numeral(text).format('0.00')}</strong> : '';
      }
    }
  ];
  const salaryColumns = [
    {
      title: '工号',
      dataIndex: 'code',
    },
    {
      title: '申请日期',
      dataIndex: 'applyTime',
      hideInSearch: true,
      render: (text) => {
        return text!=='-' ? moment(text).format('YYYY-MM-DD') : ''
      }
    },
    {
      title: '变动类型',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        0: { text: salaryAdjustmentTypeList[0].label},
        1: { text: salaryAdjustmentTypeList[1].label},
        2: { text: salaryAdjustmentTypeList[2].label},
        3: { text: salaryAdjustmentTypeList[3].label},
        4: { text: salaryAdjustmentTypeList[4].label},
        5: { text: salaryAdjustmentTypeList[5].label},
        6: { text: salaryAdjustmentTypeList[6].label},
      },
    },
    {
      title: '公司',
      dataIndex: 'orgname',
      hideInSearch: true,
      render: (text,record) =>(text!=='-' ? text : record.newOrgName)
    },
    {
      title: '所属部门',
      dataIndex: 'unitname',
      hideInSearch: true,
      render: (text,record) =>(text!=='-' ? text : record.newUnitName)
    },
    {
      title: '任职岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
      render: (text,record) =>(text!=='-' ? text : record.newJobName)
    },
    {
      title: '职级',
      dataIndex: 'jobLevelId',
      hideInSearch: true,
      render: (text,record) => {
        return text !== '-' ?
          jobLevel.find(item => text ===item.id)?.name :
          jobLevel.find(item => record.newJobLevelId ===item.id)?.name
      }
    },
    {
      title: '现月薪标准',
      dataIndex: 'standardMonthlySalary',
      hideInSearch: true,
    },
    {
      title: '现基本工资基数',
      dataIndex: 'baseSalary',
      hideInSearch: true,
    },
    {
      title: '现模块工资基数',
      dataIndex: 'moduleSalaryBase',
      hideInSearch: true,
    },
  ];

  return (
    <PageHeaderWrapper>
      <Card title="薪酬福利" style={{ marginBottom: 24 }} bordered={false}>
        <Descriptions>
          <Descriptions.Item label={"定薪标准"}><strong>{salaryInfo.total ? numeral(salaryInfo.total).format('0.00') : '暂无'}</strong></Descriptions.Item>
          <Descriptions.Item label={"基本工资基数"}><strong>{salaryInfo.bsalaryBase ? numeral(salaryInfo.bsalaryBase).format('0.00') : '暂无'}</strong></Descriptions.Item>
          <Descriptions.Item label={"模块工资基数"}><strong>{salaryInfo.mkBases ? numeral(salaryInfo.mkBases).format('0.00') : '暂无'}</strong></Descriptions.Item>
        </Descriptions>
        <Descriptions>
          {/*{salaryInfo.bases && <Descriptions.Item label="基本工资">{numeral(salaryInfo.bases).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.bsalaryBase && <Descriptions.Item label="基本工资基数">{numeral(salaryInfo.bsalaryBase).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.mkBases && <Descriptions.Item label="模块工资">{numeral(salaryInfo.mkBases).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.jb && <Descriptions.Item label="加班工资">{numeral(salaryInfo.jb).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.jy && <Descriptions.Item label="竞业津贴">{numeral(salaryInfo.jy).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.sb && <Descriptions.Item label="社保津贴">{numeral(salaryInfo.sb).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.bucSbjt && <Descriptions.Item label="补充社保津贴">{numeral(salaryInfo.bucSbjt).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.tx && <Descriptions.Item label="通讯补贴">{numeral(salaryInfo.tx).format('0.00')}</Descriptions.Item> }*/}
          {/*{salaryInfo.jiaotongbutie && <Descriptions.Item label="交通补贴">{numeral(salaryInfo.jiaotongbutie).format('0.00')}</Descriptions.Item> }*/}
          {salaryInfo.zczg && <Descriptions.Item label="职称资格补贴">{numeral(salaryInfo.zczg).format('0.00')}</Descriptions.Item> }
        </Descriptions>
      </Card>
     <ProTable
       actionRef={actionRef}
       rowKey="month"
       params={params}
       style={{marginBottom: 24}}
       request={(params) => getPaySlipList(params)}
       columns={columns}
       headerTitle="工资记录"
       scroll={{x:'2600px'}}
     />
    <ProTable
      actionRef={actionRef2}
      rowKey="id"
      search={false}
      params={params}
      style={{marginBottom: 24}}
      request={(params) => getSalaryChangeList(params)}
      columns={salaryColumns}
      headerTitle="调薪记录"
    />
    <CheckAuth
      loading={loading}
      visible={visible}
      status={status}
      onCancel={handleCancel}
      onSubmit={handleSubmit}
    />
    </PageHeaderWrapper>
  )
};

export default connect(({global}) => ({
  global
}))(TableList);
